<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
 * WYMeditor : what you see is What You Mean web-based editor
 * Copyright (c) 2008 Jean-Francois Hovinne, http://www.wymeditor.org/
 * Dual licensed under the MIT (MIT-license.txt)
 * and GPL (GPL-license.txt) licenses.
 *
 * For further information visit:
 *        http://www.wymeditor.org/
 *
 * File Name:
 *        15-rdfa-editor.html
 *        RDFa editor implementation example page.
 *        See the documentation for more info.
 *
 * File Authors:
 *        Jean-Francois Hovinne (jf.hovinne a-t wymeditor dotorg)
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RDFa editor</title>
<style type="text/css">
    /* visual feedback */
    .about         { background-color: #f99; }
    .dc_creator    { background-color: #9f9; }
    .dc_title      { background-color: #9ff; }
    .foaf_Person   { background-color: #69c; }
    .foaf_name     { background-color: #99c; }
    .foaf_homepage { background-color: #c9c; }
    .foaf_mbox     { background-color: #c6c; }
    .foaf_phone    { background-color: #c3c; }
</style>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.pack.js"></script>

<script type="text/javascript">

/*EXTEND THE XHTML PARSER*/
/*************************/

//Add the RDFa attributes
WYMeditor.XhtmlValidator._attributes['core']['attributes'].push(
    'rel',
    'rev',
    'content',
    'href',
    'src',
    'about',
    'property',
    'resource',
    'datatype',
    'typeof');

//Add the 'standard' vocabularies
WYMeditor.XhtmlValidator._attributes['core']['attributes'].push(
    'xmlns:biblio',
    'xmlns:cc',
    'xmlns:dbp',
    'xmlns:dbr',
    'xmlns:dc',
    'xmlns:ex',
    'xmlns:foaf',
    'xmlns:rdf',
    'xmlns:rdfs',
    'xmlns:taxo',
    'xmlns:xhv',
    'xmlns:xsd');

//Overwrite the <a> attributes 'rel' and 'rev'
WYMeditor.XhtmlValidator._tags['a'] = {
    "attributes": {
        "0":"charset",
        "1":"coords",
        "2":"href",
        "3":"hreflang",
        "4":"name",
        "5":"rel",
        "6":"rev",
        "shape":/^(rect|rectangle|circ|circle|poly|polygon)$/,
        "7":"type"
    }
};

/*END EXTEND*/
/************/

jQuery(function() {

    jQuery('.wymeditor').wymeditor({
        stylesheet: 'wym_stylesheet.css',
        html: '<h2 class="dc_title" property="dc:title">The trouble with Bob<\/h2><h3 class="dc_creator" property="dc:creator">Alice<\/h3>'
            + '<p>The trouble with Bob is that he takes much better photos than I do.<\/p>'
            + '<p class="foaf_Person" typeof="foaf:Person">'
            + '<strong class="foaf_name" property="foaf:name">Alice Birpemswick<\/strong><br \/>'
            + 'Email: <a class="foaf_mbox" rel="foaf:mbox" href="mailto:alice@example.com">alice@example.com<\/a><br \/>'
            + 'Phone: <a class="foaf_phone" rel="foaf:phone" href="tel:+1-617-555-7332">+1 617.555.7332<\/a>'
            + '<\/p>',

        postInit: function(wym) {

            //set the classes panel as dropdown
            jQuery(wym._box).find('div.wym_classes').hide();

            //construct the panel
            jQuery(wym._box).find('div.wym_area_right')
                .append('<div class="wym_attributes wym_section wym_panel"><\/div>')
                .children(':last')
                .append('<h2>Attributes<\/h2>')
                .append('<ul><\/ul>')
                .children(':last')
                //store the attribute name/value in the button class (better idea?)
                .append('<li><a class="about" title="What the data is about." href="#">ABOUT: about #value#<\/a><\/li>')
                .append('<li><a class="property dc_title" title="A name by which the resource is formally known." href="#">TITLE: prop dc:title<\/a><\/li>')
                .append('<li><a class="property dc_creator" title="An entity primarily responsible for making the resource." href="#">CREATOR: prop dc:creator<\/a><\/li>')
                .append('<li><a class="typeof foaf_Person" title="A person." href="#">PERSON: typeof foaf:Person<\/a><\/li>')
                .append('<li><a class="property foaf_name" title="A name for some thing." href="#">NAME: property foaf:name<\/a><\/li>')
                .append('<li><a class="rel foaf_homepage" title="A homepage for some thing." href="#">HOMEPAGE: rel foaf:homepage<\/a><\/li>')
                .append('<li><a class="rel foaf_mbox" title="A personal mailbox." href="#">MAILBOX: rel foaf:mbox<\/a><\/li>')
                .append('<li><a class="rel foaf_phone" title="A phone." href="#">PHONE: rel foaf:phone<\/a><\/li>')
                .find('a')
                //event handlers
                .click( function() {

                    //init
                    var selected  = wym.selected(),                         //selected container
                        classes   = jQuery(this).attr('class').split(' '),  //clicked button classes
                        attrName  = classes[0],                             //attribute name, e.g. 'property'
                        attrValue = classes.length > 1 ? classes[1] : null; //attribute value, if available, e.g. dc_title

                    //the attribute already exists, remove it
                    if( jQuery(selected).attr(attrName) != undefined && jQuery(selected).attr(attrName) != '') {
                        WYMeditor.console.log('attribute already exists, remove it:', attrName, jQuery(selected).attr(attrName));
                        if( classes.length == 1 || jQuery(selected).attr(attrName) == attrValue.replace('_', ':') )
                            jQuery(selected).removeAttr(attrName).removeClass(attrName).removeClass(attrValue);

                    //else, add it (and the feedback class)
                    } else {
                        WYMeditor.console.log('attribute does not exist, add it:', attrName, attrValue);
                        if( classes.length > 1 ) { //value available
                            jQuery(selected).attr(attrName, attrValue.replace('_', ':')).addClass(attrValue);
                        } else { //value not available
                            attrValue = prompt('Value', '');
                            if(attrValue != null) jQuery(selected).attr(attrName, attrValue).addClass(attrName);
                        }
                    }
                });

            //feedback css
            var rules = [
              { name: '.about',
                css: 'background-color: #f99;' },
              { name: '.dc_creator',
                css: 'background-color: #9f9;' },
              { name: '.dc_title',
                css: 'background-color: #9ff;' },
              { name: '.foaf_Person',
                css: 'background-color: #69c;' },
              { name: '.foaf_name',
                css: 'background-color: #99c;' },
              { name: '.foaf_homepage',
                css: 'background-color: #c9c;' },
              { name: '.foaf_mbox',
                css: 'background-color: #c6c;' },
              { name: '.foaf_phone',
                css: 'background-color: #c3c;' }
            ];
            wym.addCssRules( wym._doc, rules);
        }
    });
});

</script>

</head>

<body>
<h1>WYMeditor based RDFa editor (proof of concept)</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>

</body>

</html>
